<template>
  <el-input v-if="type == 'search'" v-model="inputVal" v-bind="controlSet" />
  <el-date-picker v-else-if="type == 'date'" v-model="inputVal" v-bind="controlSet" />
  <el-input-number v-else-if="type == 'number'" v-model="inputVal" v-bind="controlSet" />
  <el-switch v-else-if="type == 'switch'" v-model="inputVal" v-bind="controlSet" />
  <el-select v-else-if="type === 'select'" v-model="inputVal" v-bind="controlSet">
    <el-option v-for="(item, index) in itemList" :key="index" :label="item.text" :value="item.value" />
  </el-select>
  <dictItem v-else-if="type === 'dictItem'" v-model="inputVal" v-bind="controlSet" />
  <numRange v-else-if="type === 'numRange'" v-model="inputVal" v-bind="controlSet" />
  <treeDicItem v-else-if="type === 'dictTree'" v-model="inputVal" v-bind="controlSet" />
  <dept-select v-else-if="type === 'dept'" v-model="inputVal" v-bind="controlSet" />
  <empInput v-else-if="type === 'emp'" v-model="inputVal" v-bind="controlSet" />
  <el-date-picker
    v-else-if="type === 'year'"
    v-model="inputVal"
    type="year"
    v-bind="controlSet"
  />
</template>

<script>
import deptSelect from '@/components/unit/deptSelect.vue'
import numRange from '@/customForm/components/queryControl/numRange.vue'
import empInput from '@/components/emp/empInput.vue'
export default {
  components: {
    deptSelect,
    numRange,
    empInput
  },
  props: {
    id: {
      type: String,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    show: {
      type: String,
      default: null
    },
    code: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      type: null,
      inputVal: null,
      controlSet: {},
      style: {
        minWidth: null
      }
    }
  },
  computed: {
  },
  watch: {
    code: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        if (val && this.code) {
          this.reset()
        }
      },
      immediate: false
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      if (this.item) {
        const set = this.item.ControlSet ?? {}
        set.placeholder = this.show
        this.style.minWidth = set.width ?? '150px'
        this.controlSet = set
        if (this.code === 'dateRange') {
          set.type = 'daterange'
          this.type = 'date'
        } else {
          this.type = this.code
          this.controlSet = set
        }
      } else {
        this.controlSet = {}
        this.style.minWidth = null
        this.type = this.code
      }
    }
  }
}
</script>
<style scoped>

</style>
